<template>
  <div class="home">
    <div class="header">
      <router-link to="/" tag="a" class="logo"></router-link>
      <div class="nav-btn"></div>
    </div>
    <div class="header-swiper">
      <swiper ref="mySwiper" :options='swiperOptions'>
        <swiper-slide v-for="(item,index) in bannerLists" :key="index">
          <a :href="item.adUrl">
            <img class="swiper-img" :src="item.imageUrl" alt="">
          </a>
        </swiper-slide>
      </swiper>
    </div>
    <div class="sidebar"></div>
    <ul class="news-lists">
      <li @click="toDetails('5ebe684205e601142410fc1c')">hhh</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination'
        },
        resistanceRatio: 0
      },
      bannerLists: []
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper
    }
  },
  methods: {
    toDetails(id) {
      this.$router.push({
        name: 'Article',
        params: {
          id
        }
      })
    }
  },
  async mounted() {
    const {data:{bannerLists}} = await this.$http.get('home/banners')
    this.bannerLists = bannerLists
  },
}
</script>
<style lang="scss">
  .home {
    .header {
      width: 100%;
      height: 1.2rem;
      background: #161616;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 9;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .logo {
        width: 1.38rem;
        height: 0.8rem;
        background: url(//overseas-img.qq.com/images/chiji/act/a20190111official/h5_logo.png) no-repeat;
        background-size: 100% 100%;
        margin-left: 0.3rem;
      }
      .nav-btn {
        width: 1.2rem;
        height: 1.2rem;
        background: url(//overseas-img.qq.com/images/chiji/act/a20190111official/h5_nav.jpg) no-repeat;
        background-size: 100%;
      }
    }
    .header-swiper {
      .swiper-img {
        width: 100%;
      }
    }
  }
</style>